<template>
  <!-- 右侧导航 -->
  <div class="rightTab" :style="{ width: width }">
    <el-tabs
      tab-position="right"
      class="customer-tab"
      @tab-click="jump"
      v-model="value"
    >
      <el-tab-pane
        v-for="(tab, index) in data"
        :name="tab.value"
        :key="index"
        :label="tab.label"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      value: this.current,
      isListenParentDomScroll: false,
    };
  },
  props: {
    width: {
      type: String,
      default: "170px",
    },
    parentDom: Object, //滚动dom
    current: {
      //默认选中value名
      type: String,
      default: "",
    },
    data: {
      //list数据
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    parentDom() {
      let that = this;
      if (this.isListenParentDomScroll) return;
      this.isListenParentDomScroll = true;
      let offsetHeights = [];
      this.parentDom.addEventListener(
        "scroll",
        (function () {
          let timer: any = null;
          return function () {
            if (timer) {
              window.clearTimeout(timer);
            }
            timer = window.setTimeout(function () {
              if (!offsetHeights.length) {
                offsetHeights = that.data.map((item: any) => {
                  return item.ref.offsetTop;
                });
                offsetHeights.sort(function (a: number, b: number) {
                  return b - a;
                });
              }
              let index = offsetHeights.findIndex((h: number) => {
                if (h - 350 <= that.parentDom.scrollTop) {
                  return true;
                }
              });
              that.value = that.data[offsetHeights.length - 1 - index].value;
            }, 400);
          };
        })(),
        false
      );
    },
  },
  methods: {
    jump(ins: any) {
      let index = this.data.findIndex((item: any) => {
        return item.value == ins.paneName;
      });
      this.parentDom.scrollTop = this.data[index].ref.offsetTop;
    },
  },
});
</script>

<style scoped>
.rightTab {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  text-align: left;
  display: flex;
  justify-content: flex-start;
}
</style>